<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calculator</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="app">
      
      <div class="input-num">
        <button @click="decr">-</button>
        <span>{{cnt}}</span>
        <button @click="incr">+</button>
      </div>
       
      </div>
      <h1>
          <ul>
              <li>v-show 实质为改变样式，即style: dispalay</li>
              <li>v-if 实质为操作dom</li>
              <li>v-bind 操作属性绑定</li>
          </ul>
      </h1>
</body>
</html>

<script>
    var app = new Vue({
  el: '#app',
  data: {
    cnt: 0
  },
  methods:{
    incr : function(){
      this.cnt++;
    },
    decr : function () {
      this.cnt--;
    }
  }
})
</script>